<template>
  <div class="jjxbox">
    <div class="jjxbox_top">
      <img src="../assets/imgOrfont/tubiao.png" alt="" style="width: 50px;height: 58px; margin-right: 27px;">
      <div class="jjxbox_top_title">西安机车检修段</div>
    </div>
    <div class="jjxbox_center">
      <div class="jjxbox_center_left">
        <img src="../assets/imgOrfont/chetou.png" alt="" style="width: 100%;height: 100%;">
      </div>
      <div class="jjxbox_center_right">
        <div class="login_box">
          <div class="right_icon">
            <img src="../assets/imgOrfont/denglutu.png" alt="" style="width: 100%;height: 100%;">
          </div>
          <div class="right_action">
            <div class="right_action_title">
              材料工具一体化管理信息系统
            </div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item prop="userName" style="margin: 30px 0 40px;">
                <div class="right_action_items">
                  <img src="../assets/imgOrfont/ren.png" class="right_action_icon">
                  <input type="text" placeholder="请输入用户名" v-model="ruleForm.userName" autocomplete="off">
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div class="right_action_items">
                  <img src="../assets/imgOrfont/suo.png" alt="" class="right_action_icon"
                    style="top: 11px;height: 18px;width: 14px;">
                  <input v-model="ruleForm.password" autocomplete="off" type="password" placeholder="请输入登录密码">
                </div>
              </el-form-item>
              <el-form-item>
                <div class="right_action_items loginBtn" style="margin-top: 41px;">
                  <el-button type="primary" class="but" @click="submitForm('ruleForm')">登录</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="jjxbox_btm">
      版权所有：西安永固智能装备有限公司 技术支持：029-82099586
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validateuserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.ruleForm.userName !== '') {
          this.$refs.ruleForm.validateField('userName');
        }
        callback();
      }
    };
    var validatepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'));
      } else {
        if (this.ruleForm.password !== '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    return {
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          { validator: validateuserName, trigger: 'change' }
        ],
        password: [
          { validator: validatepassword, trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm,'ruleForm');
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style scoped>
.jjxbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-image: url('../assets/imgOrfont/jjbgc.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.jjxbox_top {
  display: flex;
  align-items: center;
  margin-top: 80px;
}

@font-face {
  font-family: electronicFont;
  src: url(../assets/imgOrfont/guangbiao.ttf)
}

.jjxbox_top_title {
  font-size: 48px;
  font-family: electronicFont;
  font-weight: 400;
  color: #D82727;
  line-height: 46px;
}

.jjxbox_btm {
  font-size: 18px;
  font-family: SimSun;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 45px;
}

.jjxbox_center {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 644px;
  height: 60vh;
}

.jjxbox_center_left {
  width: 48%;
  height: 100%;
  margin-right: 50px;
}

.jjxbox_center_right {
  width: 55%;
  margin-top: 12px;
}

.login_box {
  position: relative;
  display: flex;
  align-items: center;
  width: 45vw;
  height: 52vh;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 5px 49px 0px rgba(74, 113, 240, 0.23);
  border-radius: 14px;
  background-image: url(http://localhost:8080/img/mengceng.2398bd83.png);
  background-position: -19px -5px;
  background-repeat: no-repeat;
  background-size: 110% 107%;
}

.denglututips {
  position: absolute;
  left: 121px;
  top: 53px;
  font-size: 1.15vw;
  font-family: electronicFont;
  font-weight: 700;
  color: #3B63D9;
  line-height: 32px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}

.right_icon {
  width: 18vw;
  height: 16vw;
  margin-left: 34px;
  position: relative;
}

.right_action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 37px;
}

.right_action_title {
  /* font-size: 30px; */
  font-size: 1.57vw;
  font-family: electronicFont;
  font-weight: 400;
  color: #242424;
  line-height: 69px
}

.right_action_items {
  position: relative;
  display: flex;
  align-items: center;
  /* width: 360px; */
  width: 19vw;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #81A4FF;
  border-radius: 4px;
  overflow: hidden;
}

.right_action_items input {
  width: 100%;
  height: 100%;
  padding-left: 35px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  outline: #326cff;
}

.forgetpwd {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #2F66F7;
  line-height: 24px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.right_action_icon {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 15px;
  height: 22px;
}

.loginBtn {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 9px 25px 0px rgba(55, 100, 221, 0.63);
  border-radius: 20px;

}

.but {
  width: 19vw;
  height: 40px;
  background: #2F66F7;
  border-radius: 20px;
  overflow: hidden;
}
</style>
